<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        .el-header, .el-footer {
          background-color: white;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: white;
            color: #333;
            padding: 0px
        }
       .top_2{

           background-color:#0aa1ed;
           padding: 0px 0px;
           position: relative;

       }.top_1{
           height: 50%;
                   background-color: white;
               }
       a{
           text-decoration: none;
       }
       a:hover{
           color: #0aa1ed;
       }
        #m1_l{
            background-color: yellowgreen;
            width: 850px;
            float:left;
        }
        #m1_r{
            margin-left: 10px;
            width: 300px;
            height: 100%;
            float:left;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="margin: 0 auto" >
        <el-header height="150px" style="padding: 0">
           <el-container class="top_1" >
               <div class="top_1_l" style="width: 30%;">
                   <el-image style="width: 100%;height: 100%; position: relative;
                    left: 50px;
" src="imgs/logo.png" fit="contain"></el-image>
               </div>
               <div class=top_1_r">

                   <a href="" style="color: #0aa1ed">首页</a>
                   <el-divider direction="vertical"></el-divider>
                   <a href="">热点资讯</a>
                   <el-divider direction="vertical"></el-divider>
                   <a href="">商家入驻</a>
                   <el-divider direction="vertical"></el-divider>
                   <a href="">社会招聘</a>
                   <el-divider direction="vertical"></el-divider>
                   <a href="">校园招聘</a>
                   <el-divider direction="vertical"></el-divider>
                   <a href="">帮助中心</a>
               </div>
           </el-container>

           <el-container  class="top_2">
               <el-menu
                       :default-active="activeIndex2"
                       class="el-menu-demo"
                       mode="horizontal"
                       @select="handleSelect"
                       background-color="#0aa1ed"
                       text-color="#fff"
                       active-text-color="white" style="margin: 0 auto;">
                   <el-menu-item index="1">处理中心</el-menu-item>
                   <el-submenu index="2">
                       <template slot="title">我的工作台</template>
                       <el-menu-item index="2-1">选项1</el-menu-item>
                       <el-menu-item index="2-2">选项2</el-menu-item>
                       <el-menu-item index="2-3">选项3</el-menu-item>
                       <el-submenu index="2-4">
                           <template slot="title">选项4</template>
                           <el-menu-item index="2-4-1">选项1</el-menu-item>
                           <el-menu-item index="2-4-2">选项2</el-menu-item>
                           <el-menu-item index="2-4-3">选项3</el-menu-item>
                       </el-submenu>
                   </el-submenu>
                   <el-menu-item index="3" >消息中心</el-menu-item>
                   <el-menu-item index="4" >消息中心</el-menu-item>
                   <el-menu-item index="3" >消息中心</el-menu-item>
                   <el-menu-item index="4" >消息中心</el-menu-item>
                   <el-menu-item index="3" >消息中心</el-menu-item>

               </el-menu>
               <el-input v-model="input" placeholder="请输入内容" style="width: 200px;
                position: absolute; margin-left: 75%;
"></el-input>
               <el-button type="primary" icon="el-icon-search" style="color:
                #0aa1ed;background-color: white;color: #0aa1ed; height: 50%;margin: 10px 80px 0 0"></el-button>
           </el-container>
        </el-header>
        <el-main style="padding: 0px 80px; background-color: white">
               <div id="m1" style="width: 100%;height:350px;  overflow: hidden;
                  margin-bottom: 20px;
">
                   <div id="m1_l">
                           <span class="demonstration"></span>
                           <el-carousel trigger="click" height="350px">
                               <el-carousel-item v-for="item in array" :key="item" >
                                   <img :src="item" alt="" style="width: 100%;height: 100%">
                               </el-carousel-item>
                           </el-carousel>

                   </div>
                   <div id="m1_r">
                       <el-card style="height:98%; text-align: left" >
                         <h1>销售最高</h1>
                           <h1>销售最高</h1>
                       </el-card>
                   </div>
               </div>
               <div id="m2" style="height: 1000px;background-color: blue"></div>
        </el-main>
        <el-footer style="background-color: #404040;height: 200px">Footer</el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                array:["imgs/b1.jpg","imgs/b2.jpg","imgs/b3.jpg"]
            }
        }
    })
</script>
</html>